<template>
  <!-- 页面切换过渡 -->
  <transition :name="transitionName">
    <keep-alive :include="/Search|searchResult/">
      <router-view :style="pageStyle"></router-view>
    </keep-alive>
  </transition>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      //过渡名
      transitionName: '',
    }
  },
  //计算属性
  computed: {
    //页面样式
    pageStyle() {
      const style = {}
      style.width = '100vw'
      style.height = '100vh'
      return style
    },
  },
  //控制页面切换顺序
  watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        this.transitionName = 'transitionLeft'
      } else {
        this.transitionName = 'transitionRight'
      }
    },
  },
  //挂载后执行的操作
  mounted() {
    //不属于移动端设备
    if (window.innerWidth >= 768) {
      //跳转路由
      this.$router.replace({
        path: '/noSupport',
      })
    }
    //属于移动端设备
    else {
      //跳转路由
      this.$router.replace({
        path: '/main',
      })
    }
  },
}
</script>


// 引入公共样式
<style src="./theme.css"></style>
<style src="@/assets/css/normalize.css"></style>
<style>
/* 让整个app的文字无法选择复制 */
html,
body {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  overflow: hidden;
}
/* 计算自适应 */
html {
  font-size: calc(100vw / 375 * 100);
}

body {
  font-size: 16px;
}
.transitionLeft-enter {
  transform: translateX(100%);
}

.transitionLeft-enter-active {
  transition: all 0.3s;
  position: absolute;
  height: 100%;
  background: #ececec;
}

.transitionLeft-leave-active {
  transition: all 0;
  transition-delay: 0.3s;
  position: absolute;
}

.transitionLeft-leave-to {
  transform: translateX(-100%);
}

.transitionRight-enter {
  transform: translateX(-100%);
}

.transitionRight-leave-to {
  transform: translateX(100%);
}

.transitionRight-enter-active {
  transition: all 0s;
  position: absolute;
  z-index: 2;
}

.transitionRight-leave-active {
  transition: all 0.3s;
  position: absolute;
  z-index: 999;
  height: 100%;
  background: #ececec;
}
</style>
